<template>
  <!-- 不合格标本记录子组件 -->
  <div id="unqSpecRec">
    <Splitpanes>
      <Pane :style="{ width: `${100 - paneWidthS}%`, height: '100%' }">
        <el-scrollbar style="height: 100%; width: 100%">
          <div class="checkboxDiv">
            <vxe-toolbar perfect>
              <template #buttons> 请选择不合格标本原因 </template>
            </vxe-toolbar>
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item v-for="(item, index) in unqualifiedReasonGroupList" :label="item.unqualifiedGroup" :key="index">
                <vxe-checkbox-group v-model="chackedReasonIds" @change="chackedReasonChange">
                  <vxe-checkbox v-for="(reason, idx) in item.labUnqualifiedReasons" :label="reason.id" :content="reason.reason" :key="idx"></vxe-checkbox>
                </vxe-checkbox-group>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-scrollbar>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted, ObjectDirective } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { AppStore } from '../stores/store';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { IsEmpty } from '@/utils/common';

let { proxy }: any = getCurrentInstance();
let store = AppStore();
// 方法定义区 =============
defineExpose({ getDetil, saveDetil, cleanData });

let reqUnqualifiedId = ref(''); //reqUnqualifiedId
let paneWidthS = ref(0); //记录单宽度百分比
let loading = ref(false);
let currentUnqSpecRec = ref({}) as any; //当前选中行
let chackedReasonIds = reactive([]); //选中的不合格原因
let form = {
  specCode: ''
};
let returnReason = ref();
let formRules = {
  visitTypeId: [{ required: true, message: '请选择病人来源' }]
};

function getDetil(unqualifiedSpecId: any) {
  reqUnqualifiedId.value = unqualifiedSpecId;
  findUnqualifiedSpecReason(unqualifiedSpecId);
}

function cleanData() {
  chackedReasonIds.length = 0;
}

/**
 * 保存子项
 */
function saveDetil(row: any) {
  if (IsEmpty(reqUnqualifiedId.value)) {
    VxeMessage('请新增一条不合格记录', VxeNotifyType.error);
    return;
  }
  if (chackedReasonIds.length == 0 || IsEmpty(chackedReasonIds)) {
    VxeMessage('请选择回退原因', VxeNotifyType.error);
    return;
  }
  loading.value = true;
  //当前登录用户 EmpId
  const url = '/lab/req/unqualified/detail/saveDetailByMain';
  const data = {
    reqUnqualifiedId: reqUnqualifiedId.value,
    unqualifiedDetailIds: chackedReasonIds,
    contactCode: row ? row.contactCode : '',
    contactName: row ? row.contactName : '',
    contactTime: row ? row.contactTime : ''
  };
  proxy.$http
    .post(url, data)
    .then((res: any) => {
      if (res.status.code === 200) {
        proxy.$emit('saveReasons', res.data.illustrate); //触发父组件重新获取表格数据
        VxeMessage('保存成功', VxeNotifyType.success);
      } else {
        loading.value = false;
        VxeMessage('操作失败', VxeNotifyType.error);
      }
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('操作失败', VxeNotifyType.error);
    });
}

// 全局变量定义区 ==========
// let props = defineProps({
//   unqualifiedSpecRecRef: ref(null)
// }) as any;

onMounted(() => {
  getUnqualifiedReasonGroupList();
});
// console.log('unqualifiedSpecRecRef-',unqualifiedSpecRecRef);

// #region 【选择不合格标本原因】
let Rloading = false;
let unqualifiedReasonGroupList = reactive([]);

// 获取不合格标本分组
function getUnqualifiedReasonGroupList() {
  Rloading = true;
  const url = '/lab/unqualified/reason/getUnqualifiedList';
  const data = { unqualifiedCode: '002' };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      unqualifiedReasonGroupList.push(...res.data);
    })
    .catch((err: any) => {
      loading.value = false;
      proxy.$alert(err, '提示');
    });
}
// 获取不合格原因
function findUnqualifiedSpecReason(id) {
  const url = '/lab/req/unqualified/detail/getDetailList';
  const data = {
    reqUnqualifiedId: id
  };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      chackedReasonIds.length = 0;
      res.data.forEach((item) => {
        chackedReasonIds.push(item.unqualifiedReasonId);
        /*    this.oldChackedReason.push({
              unqualifiedSpecReasonId: item.id,
              unqualifiedReasonId: item.unqualifiedReasonId
            });*/
      });
    })
    .catch((err) => {
      VxeMessage('数据请求异常', VxeNotifyType.error);
    });
}

// 多选框选中改变
function chackedReasonChange(val) {
  proxy.$emit('chackedReasonChange', val.checklist); //触发父组件重新获取表格数据
}
// #endregion
</script>
<style lang="scss" scoped>
#unqSpecRec {
  height: 100%;
  .button-red {
    margin: 5px 0 5px 5px;
  }
  .checkboxDiv {
    padding-right: 10px;
  }
  .el-descriptions {
    width: 100%;
    .el-descriptions-item {
      width: 50%;
    }
    :deep(.el-descriptions .el-descriptions-item__label) {
      text-align: left;
    }
    :deep(.el-descriptions__body) {
      .el-descriptions__cell {
        width: 50%;
      }
    }
    .vxe-checkbox {
      margin: 5px;
    }
  }
}
</style>
